<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form class="formGroup" *ngIf="!isNetwork">
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'common_port_ip_address_label' | i18n }}
        </lv-form-label>
        <lv-form-control>
            {{ data.ip | nil }}
        </lv-form-control>
    </lv-form-item>
</lv-form>
<div [ngClass]="{'add-button':!isNetwork, 'aui-gutter-column-md': isNetwork}">
    <button lv-button (click)="add()" lvType="primary">
        {{ 'common_new_add_label' | i18n }}
    </button>
</div>
<lv-form [formGroup]="formGroup" class="migrate-host-container">
    <lv-datatable [lvData]="[{}]" #lvTable formArrayName="targetRoute" [lvPaginator]="pageA" lvResize [lvScroll]="{y:'52vh', autosize:true}" lvFake>
        <thead>
            <tr>
                <th width="170px">
                    <span class="text-middle">{{ 'common_type_label' | i18n }}</span>
                    <i lv-icon="aui-icon-help" lv-tooltip="{{'common_route_add_tip_label' | i18n}}"
                        class="help-icon" lvColorState='true'></i>
                </th>
                <th width="170px">{{ 'common_target_address_label' | i18n }}</th>
                <th width="170px" *ngIf="isIpv4">{{ 'common_mask_ip_label' | i18n }}</th>
                <th width="170px" *ngIf="!isIpv4">{{ 'common_subnet_prefix_label' | i18n }}</th>
                <th width="170px">{{ 'common_gateway_label' | i18n }}</th>
                <th width="160px">{{ 'common_operation_label' | i18n }}</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of targetRoute; let i = index;" [formGroupName]="i">
                <tr style="height:48px" *ngIf="i < (pageIndex+1) * pageSize && i>=(pageIndex * pageSize)">
                    <td style="width:170px">
                        <lv-form-control *ngIf="!item.value.isExist">
                            <lv-select [lvOptions]="routeOptions" lvValueKey="value" formControlName="type"
                                class="content-input"></lv-select>
                        </lv-form-control>
                        <span *ngIf="item.value.isExist">
                            {{item.value.type | textMap: 'initRouteType'}}
                        </span>
                    </td>
                    <td style="width:170px">
                        <lv-form-control [lvErrorTip]="baseUtilService.ipErrorTip" *ngIf="item.value?.type !== '2' && !item.value.isExist">
                            <input lv-input type="text" formControlName="targetAddress" class="content-input" />
                        </lv-form-control>
                        <span *ngIf="item.value.type === '2' || item.value.isExist">
                            {{item.value.targetAddress}}
                        </span>
                    </td>
                    <td style="width:170px">
                        <lv-form-control [lvErrorTip]="prefixErrorTip" *ngIf="item.value.type === '0' && !item.value.isExist">
                            <input lv-input type="text" formControlName="mask" class="content-input" />
                        </lv-form-control>
                        <span *ngIf="item.value.type !== '0' || item.value.isExist">
                            {{item.value.mask}}
                        </span>
                    </td>
                    <td style="width:170px">
                        <lv-form-control [lvErrorTip]="baseUtilService.ipErrorTip" *ngIf="!item.value.isExist">
                            <input lv-input type="text" formControlName="gateWay" class="content-input" />
                        </lv-form-control>
                        <span *ngIf="item.value.isExist">{{ item.value.gateWay }}</span>
                    </td>
                    <td style="width:160px">
                        <lv-group lvGutter="16px" class="content-input">
                            <span class="aui-link" (click)="confirm(item)" *ngIf="!item.value.isExist && !isNetwork">
                                {{ 'common_confirm_label' | i18n }}
                            </span>
                            <span class="aui-link" (click)="remove(i)">
                                {{ 'common_remove_label' | i18n }}
                            </span>
                        </lv-group>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <lv-paginator #pageA lvMode="simple" lvShowPageSizeOptions="true" class="table-paginator" [lvPageSize]="pageSize"
        [lvPageIndex]="pageIndex" [lvTotal]="targetRoute.length" (lvPageChange)="pageChange($event)" [hidden]="targetRoute.length < 20">
    </lv-paginator>
</lv-form>
